<template>
    <div>
        <van-nav-bar left-arrow @click-left="onClickLeft" />
        <van-steps :active="active" active-color="#07c160">
            <van-step>绑定手机号</van-step>
            <van-step>输入密码</van-step>
            <van-step>基本信息</van-step>
            <van-step>交易完成</van-step>
        </van-steps>
        <div class="login" v-if="active == 0">
            <van-cell-group inset>
                <van-field v-model="mobile" label="手机号" placeholder="请输入用户名"
                    style="border-bottom: 0.1px solid #EBEBED;" />
                <van-field v-model="sms" center clearable label="验证码" placeholder="请输入短信验证码"
                    style="border-bottom: 0.1px solid #EBEBED;">
                    <template #button>
                        <span style="border: 0;color: rgb(100,171,107);" @click="getCaptcha">{{ msg }}</span>
                    </template>
                </van-field>
            </van-cell-group>

            <van-checkbox icon-size="16px" checked-color="#0FAB6B"
                style="margin-top: 20px;padding-left: 10px;font-size: 13px;" v-model="checked">
                我已阅读并同意 <a style="color:#0FAB6B ;">《强盛在线用户服务协议》</a>以及 <a style="color:#0FAB6B ;">《隐私政策》</a>
            </van-checkbox>
            <van-button type="primary" block @click="login" class="van-button">下一步</van-button>
        </div>

        <div class="login-two" v-if="active == 1">
            <van-form>
                <van-cell-group inset>
                    <van-field v-model="password" type="password" label="密码" placeholder="密码"
                        autocomplete="current-password" />
                    <van-field v-model=" passwords" type="password" label="再次输入密码" placeholder="密码"
                        autocomplete="current-passwords" />
                </van-cell-group>
                <div style=" margin: 16px;">
                    <van-button round block type="primary" class="van-button" @click="next">
                        下一步
                    </van-button>
                </div>
            </van-form>
        </div>

        <div class="login-three" v-if="active == 2">
            <van-form @submit="onSubmit">
                <van-cell-group inset>

                    <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名" />
                    <van-field v-model="email" name="邮箱" label="邮箱" placeholder="邮箱" />
                    <van-field v-model="address" is-link readonly name="picker" label="地区" placeholder="点击选择城市"
                        @click="showPicker = true" />
                    <van-popup v-model:show="showPicker" position="bottom">
                        <van-picker :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
                    </van-popup>
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit" @click="finish">
                        提交
                    </van-button>
                </div>
            </van-form>

        </div>

        <div class="login-four" v-if="active == 3">
            <div class="circle">
                <van-icon class="van-icon" name="success" color="#f5f5f5" size="5rem" />
                <van-button round block type="primary" @click="router.push('/login')">
                    完成
                </van-button>
            </div>

        </div>
    </div>
</template>

<script setup>
import AxiosServer from '@/router/axios';
import { showToast } from 'vant';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const onClickLeft = () => history.back();
const active = ref( 0 );

//login验证码
const msg = ref( '获取验证码' )
const time = ref( 60 )
const mobile = ref( '' );
const sms = ref( '' );
const checked = ref( false );
const login = () => {
    if ( !checked.value ) {
        showToast( '请勾选协议' )
        return
    }else if(!mobile.value || !sms.value){
        showToast( '请填写手机号和验证码' )
    }else{
        active.value++
    }
}
//验证电话号码格式
function isPhone( tel ) {
    var regx = /^1[345789]\d{9}$/;
    return regx.test( tel );
}
//获取验证码
const getCaptcha = async () => {
    if ( mobile.value == "" ) {
        showToast( "请输入手机号" )
    } else {
        if ( !isPhone( mobile.value ) ) {
            showToast( "手机号格式错误" )
        } else {
            let times = setInterval( () => {
                time.value--
                msg.value = `${ time.value }秒后重发`
                if ( time.value == 0 ) {
                    clearInterval( times )
                    msg.value = "获取验证码"
                }
            }, 1000 )
            await AxiosServer.post( "/ljsApi/sendCode", {
                mobile: mobile.value
            } )
        }
    }
}

// login-two密码
const passwords = ref( '' );
const password = ref( '' );
const next = () => {
    if ( password.value == passwords.value ) {
        if ( !password.value || !passwords.value ) {
            showToast( '密码不能为空' )
        } else {
            active.value++
       }
    } else {
        showToast( '两次密码不一致' )
    }
}

//login-three用户信息
const username = ref('')
const address = ref( '' );
const email = ref( '' );
const showPicker = ref( false );
const columns = [
    { text: '杭州', value: '杭州' },
    { text: '宁波', value: '宁波' },
    { text: '温州', value: '温州' },
    { text: '绍兴', value: '绍兴' },
    { text: '湖州', value: '湖州' },
    { text: '北京', value: '北京' },
    { text: '天津', value: '天津' },
    { text: '上海', value: '上海' },
    { text: '重庆', value: '重庆' },
    { text: '成都', value: '成都' }
];

const onConfirm = ( { selectedOptions } ) => {
    address.value = selectedOptions[ 0 ]?.text;
    showPicker.value = false;
};
const finish = async() => {
    const {data} = await AxiosServer.post("/ljsApi/register",{
        mobile:mobile.value,
        captcha:sms.value,
        password:password.value,
        username:username.value,
        address:address.value,
        email:email.value
    })
    if ( data.status == 200){
        showToast("注册成功")
        active.value++
    } else {
        showToast(data.msg)
    }
 
    console.log( mobile.value, sms.value, password.value, passwords.value ,username.value,address.value,email.value);
}
</script>

<style lang="scss" scoped>
.van-button{
    background-color: rgb(15, 171, 107);
    width: 90%;
    margin: auto;
    margin-top: 25px;
}
.login-four{
    text-align: center;
    margin-top: 20px;
}
 .circle {
     width: 150px;
     height: 150px;
     border-radius: 50%;
     background-color: #07c160;
     display: inline-block;
     margin: 0 5px;
     line-height: 150px;
 }
 .van-icon {
     padding-top: 30px;
 }
</style>